<template>
  <view class="record-page">
    <!-- 日期筛选 -->
    <view class="filter-bar">
      <view class="date-tabs">
        <view 
          v-for="(tab, index) in dateTabs" 
          :key="index"
          :class="['tab-item', currentTab === index ? 'active' : '']"
          @tap="handleTabChange(index)"
        >
          {{ tab.label }}
        </view>
      </view>
      
      <!-- <view class="date-picker" v-if="currentTab === dateTabs.length - 1">
        <picker 
          mode="date" 
          :value="startDate" 
          @change="onStartDateChange"
        >
          <text>{{ startDate || '开始日期' }}</text>
        </picker>
        <text class="separator">至</text>
        <picker 
          mode="date" 
          :value="endDate" 
          @change="onEndDateChange"
        >
          <text>{{ endDate || '结束日期' }}</text>
        </picker>
      </view> -->
    </view>

    <!-- 记录列表 -->
    <view class="record-list">
      <view v-for="(item, index) in recordList" 
            :key="index" 
            class="record-card">
        <view class="record-header">
          <text class="goods-name">{{ item.goodsName }}</text>
          <text class="record-time">{{ formatDate(item.createTime) }}</text>
        </view>
        <view class="record-content">
          <view class="record-info">
            <text class="amount">数量：{{ item.amount }}</text>
            <text class="price">单价：¥{{ item.price }}</text>
          </view>
          <view class="record-footer">
            <text class="supplier">公司：{{ item.supplierName }}</text>
            <text class="total-price">总价：¥{{ item.total }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="recordList.length === 0" class="empty-state">
      <uni-icons type="shop" size="64" color="#999"/>
      <text class="empty-text">暂无销售记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { recordApi } from '@/api/record'

const recordList = ref([])
const startDate = ref('')
const endDate = ref('')
const currentTab = ref(0)
const page = ref(1)
const size = ref(10)
const hasMore = ref(true)

// 日期选项卡
const dateTabs = [
  { label: '今日', value: 'day' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '本年', value: 'year' },
  // { label: '自定义', value: 'custom' }
]

// 格式化日期为字符串 YYYY-MM-DD
const formatDateToString = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 获取日期范围
const getDateRange = (type) => {
  const end = new Date()
  const start = new Date()
  
  switch (type) {
    case 'day':
      start.setHours(0, 0, 0, 0)
      break
    case 'week':
      const day = start.getDay() || 7
      start.setDate(start.getDate() - day + 1)
      start.setHours(0, 0, 0, 0)
      break
    case 'month':
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      break
    case 'year':
      start.setMonth(0, 1)
      start.setHours(0, 0, 0, 0)
      break
  }
  
  return { start, end }
}

// 处理选项卡切换
const handleTabChange = (index) => {
  currentTab.value = index
  // if (index < dateTabs.length - 1) {
    const { start, end } = getDateRange(dateTabs[index].value)
    startDate.value = formatDateToString(start)
    endDate.value = formatDateToString(end)
    page.value = 1 // 重置页码
    getRecordList()
  // }
}

// 获取销售记录
const getRecordList = async () => {
  try {
    const params = {
      page: page.value,
      size: size.value
    }
    if (startDate.value && endDate.value) {
      params.startDate = startDate.value
      params.endDate = endDate.value
    }
    const res = await recordApi.getSalesList(params)
    
    if (page.value === 1) {
      recordList.value = res.list || []
    } else {
      recordList.value.push(...(res.list || []))
    }

    hasMore.value = res.hasMore
  } catch (error) {
    console.error('获取销售记录失败:', error)
    uni.showToast({
      title: '获取记录失败',
      icon: 'error'
    })
  }
}

// 日期选择处理
const onStartDateChange = (e) => {
  startDate.value = e.detail.value
  page.value = 1
  getRecordList()
}

const onEndDateChange = (e) => {
  endDate.value = e.detail.value
  page.value = 1
  getRecordList()
}

// 格式化显示日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  handleTabChange(0) // 默认选中今日
})

// 触底加载更多
onReachBottom(() => {
  if (!hasMore.value) {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    })
    return
  }
  page.value++
  getRecordList()
})
</script>

<style>
.record-page {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 16px;
}

.filter-bar {
  background: #fff;
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 12px;
}

.date-tabs {
  display: flex;
  margin-bottom: 12px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4080ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #4080ff;
  border-radius: 1px;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.separator {
  color: #999;
}

.record-list {
  margin-top: 12px;
}

.record-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.goods-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-info {
  display: flex;
  gap: 16px;
}

.amount, .price {
  font-size: 14px;
  color: #666;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.supplier {
  font-size: 13px;
  color: #666;
}

.total-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: 500;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}

.empty-text {
  color: #999;
  font-size: 14px;
}
</style> 